<template>
  <div class="mobile-carousel3">
    <div v-fade-in class="carousel-title">{{ data?.name }}</div>
    <div v-fade-in class="carousel-content">
      {{ data?.introduce }}
    </div>
    <M-button v-slide-up @click="handleDetail" />
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        name: "",
        introduce: "",
        id: "",
      };
    },
  },
});

// 跳转详情
const handleDetail = () => {
  router.push({ path: "/m/product", query: { id: props.data.id } });
};
</script>
<style lang="scss" scoped>
.mobile-carousel3 {
  width: 100%;
  height: 100vh;
  background: url("@/assets/home/carousel3.png") no-repeat;
  background-size: cover;
  position: relative;
  .carousel-title {
    position: absolute;
    left: 1.25rem;
    top: 20%;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    color: #fff;
    z-index: 4;
    width: 80%;
  }
  .carousel-content {
    position: absolute;
    left: 1.25rem;
    top: 32%;
    font-size: 14px;
    width: 80%;
    line-height: 24px;
    color: #fff;
    z-index: 4;
  }
  :deep(.more-btn) {
    position: absolute;
    left: 1.25rem;
    bottom: 20%;
  }
}
</style>
